<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper" :style="{ backgroundImage: 'url(' + bgImage + ')' }">
      <div class="site-content">
        <div class="login-main">
          <h3 class="login-title">Arunachal后台管理系统</h3>
          <p class="login-subtitle">高效·稳定·智能 的运营管理中心</p>
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
            <el-form-item prop="userPhone">
              <el-input v-model="dataForm.userPhone" placeholder="手机号" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item prop="userPassword">
              <el-input v-model="dataForm.userPassword" type="password" placeholder="密码" prefix-icon="el-icon-lock" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 二维码弹窗 -->
    <el-dialog
      :title="qrCodeTitle"
      :visible.sync="qrCodeVisible"
      width="320px"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="qr-code-dialog"
    >
      <div class="qr-code-container">
        <div v-if="qrCodeUrl" class="qr-code-wrapper">
          <img :src="qrCodeUrl" alt="登录二维码" class="qr-code-image">
          <div class="qr-code-tip">请使用{{ qrCodeType === 'wechat' ? '微信' : '支付宝' }}扫码登录</div>
        </div>
        <div v-else class="qr-code-loading">
          <el-spinner type="spinner" size="32"></el-spinner>
          <p>正在加载二维码...</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bgLight from '@/assets/img/login-aurora-soft-light.svg'
import bgDark from '@/assets/img/login-aurora-soft-dark.svg'
export default {
  data() {
    return {
      // 原有数据保持不变
      dataForm: {
        userPhone: '',
        userPassword: '',
      },
      dataRule: {
        userPhone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      },
      // 二维码相关数据
      qrCodeVisible: false,
      qrCodeUrl: '',
      qrCodeType: '',
      qrCodeTitle: '',
      qrCodeTimer: null,
      // 微信登录相关
      wxState: '',
      wxLoginInterval: null,
      wxLoginTimeout: null,
      bgImage: ''
    }
  },

  mounted() {
    this.bgImage = this.getDayNightBg();
  },

  methods: {
    // 提交表单 - 保持不变
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/user/user/authWormholeGalaxyAdmin'),
            method: 'post',
            data: this.$http.adornData({
              'userPhone': this.dataForm.userPhone,
              'userPassword': this.dataForm.userPassword,
            })
          }).then(({data}) => {
            if (data && data.success) {

              // 保存token到cookie
              if (data.data.userToken) {
                this.$cookie.set('token', data.data.userToken);
              }
              //保存用户信息
              this.$store.commit('user/updateId', data.data.id);
              this.$store.commit('user/updateCode', data.data.userCode);
              this.$store.commit('user/updateName', data.data.userName);
              this.$router.replace({ name: 'home' })
            } else {
              if(data && data.code=="QRY_USER_ERROR"){
                this.$message.error("用户名或密码错误")
              }
              else if(data && data.code=="PERMISSION_DENIED"){
                this.$message.error("非管理员不可登录")
              }
              else if(data && data.code) {
                // 显示具体的错误码和消息
                this.$message.error("登录失败: " + data.code)
              }
              else {
                this.$message.error("系统异常请重试")
              }
            }
          }).catch(error => {
            console.error('登录请求异常:', error);
            this.$message.error("网络异常，请检查网络连接")
          })
        }
      })
    },

    // 停止轮询
    stopWxLoginPolling() {
      if (this.wxLoginInterval) {
        clearInterval(this.wxLoginInterval);
        this.wxLoginInterval = null;
      }

      if (this.wxLoginTimeout) {
        clearTimeout(this.wxLoginTimeout);
        this.wxLoginTimeout = null;
      }
    },

    getDayNightBg() {
      const hour = new Date().getHours();
      const isDay = hour >= 7 && hour < 19;
      return isDay ? bgLight : bgDark;
    }
  },

  // 组件销毁前清除定时器
  beforeDestroy() {
    this.stopWxLoginPolling();
  }
}

</script>

<style lang="scss">
.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;

  .site-content__wrapper {
    background-image: url(~@/assets/img/login-aurora-soft.svg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.2) 100%);
      backdrop-filter: blur(2px);
    }
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(1200px 600px at 10% 10%, rgba(15, 111, 255, 0.18), transparent 60%),
        radial-gradient(900px 500px at 90% 20%, rgba(0, 227, 193, 0.15), transparent 60%),
        radial-gradient(800px 500px at 80% 85%, rgba(255, 102, 153, 0.12), transparent 60%);
      animation: float-glow 18s ease-in-out infinite alternate;
    }
  }

  .site-content {
    min-height: auto;
    padding: 0;
    width: 100%;
    max-width: 1200px;
  }

  .login-main {
    position: relative;
    padding: 50px 45px;
    width: 420px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.85));
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }
  }

  .login-title {
    font-size: 28px;
    text-align: center;
    margin-bottom: 8px;
    color: #2c3e50;
    font-weight: 600;
    letter-spacing: 1px;
  }

  .login-subtitle {
    text-align: center;
    margin-bottom: 28px;
    color: #6b7280;
    font-size: 14px;
    letter-spacing: 0.5px;
  }

  .el-form-item {
    margin-bottom: 25px;

    .el-input {
      .el-input__inner {
        height: 50px;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        padding-left: 15px;
        font-size: 15px;
        transition: all 0.3s ease;
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: inset 0 0 0 1px transparent;

        &:focus {
          border-color: #409EFF;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
        }
      }
    }
  }

  .login-btn-submit {
    width: 100%;
    margin-top: 15px;
    height: 50px;
    font-size: 16px;
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: 1px;
    background: linear-gradient(45deg, #409EFF, #36D1DC);
    border: none;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(64, 158, 255, 0.28);
    }
  }

  .third-party-login {
    margin-top: 30px;

    .divider {
      position: relative;
      text-align: center;
      margin: 20px 0;

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 35%;
        height: 1px;
        background-color: #e0e0e0;
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
      }

      span {
        display: inline-block;
        padding: 0 15px;
        color: #666;
        font-size: 14px;
        background-color: #fff;
      }
    }

    .social-login-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;

      .social-icon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background-color: #f5f5f5;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .social-svg-icon {
          width: 24px;
          height: 24px;
        }
      }
    }
  }

  .login-tips {
    margin-top: 30px;
    color: #a7a7a7;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    background-color: rgba(245, 245, 245, 0.7);
    padding: 15px;
    border-radius: 8px;

    .tip {
      margin: 8px 0;
      color: #666;
    }
  }

  @media (max-width: 768px) {
    .login-main {
      width: 90%;
      padding: 35px 25px;
    }

    .login-title {
      font-size: 24px;
    }
  }
}

.qr-code-dialog {
  .el-dialog__body {
    padding: 20px;
  }

  .qr-code-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;

    .qr-code-wrapper {
      text-align: center;

      .qr-code-image {
        width: 200px;
        height: 200px;
        margin-bottom: 15px;
      }

      .qr-code-tip {
        color: #666;
        font-size: 14px;
      }
    }

    .qr-code-loading {
      text-align: center;

      p {
        margin-top: 10px;
        color: #666;
      }
    }
  }
}

@keyframes float-glow {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(100%);
  }
  50% {
    transform: translate3d(-10px, 6px, 0) scale(1.02);
    filter: saturate(120%);
  }
  100% {
    transform: translate3d(8px, -8px, 0) scale(1.03);
    filter: saturate(110%);
  }
}
</style>
